<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
	<meta name="keywords" content="jquery ContextMenu" />
	<meta name="description" content="jquery ContextMenu" />
	<!-- 网页标签标题 -->
	<title>jquery contextmenu 右击菜单插件</title>
	<link rel="shortcut icon" href="/my-project/img/docsite.ico"/>
	<link rel="stylesheet" href="/my-project/build/blogDetail.css" />
</head>
<body>
	<div id="root"><div class="blog-detail-page" data-reactroot=""><header class="header-container header-container-normal"><div class="header-body"><a href="/my-project/zh-cn/index.html"><img class="logo" src="/my-project/img/dubbo_colorful.png"/></a><div class="search search-normal"><span class="icon-search"></span></div><span class="language-switch language-switch-normal">En</span><div class="header-menu"><img class="header-menu-toggle" src="/my-project/img/system/menu_gray.png"/><ul><li class="menu-item menu-item-normal"><a href="/my-project/zh-cn/index.html" target="_self">首页</a></li><li class="menu-item menu-item-normal"><a href="/my-project/zh-cn/docs/demo1.html" target="_self">文档</a></li><li class="menu-item menu-item-normal menu-item-normal-active"><a href="/my-project/zh-cn/blog/index.html" target="_self">博客</a></li><li class="menu-item menu-item-normal"><a href="/my-project/zh-cn/community/index.html" target="_self">社区</a></li></ul></div></div></header><section class="blog-content markdown-body"><h3>添加插件</h3>
<pre><code class="language-html"> <span class="hljs-tag">&lt;<span class="hljs-name">link</span> <span class="hljs-attr">rel</span>=<span class="hljs-string">"stylesheet"</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"${ctxStatic}/components/contextmenu/jquery.contextMenu.min.css"</span>&gt;</span>
 <span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"${ctxStatic}/components/contextmenu/jquery.contextMenu.js"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span>
 <span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"${ctxStatic}/components/contextmenu/jquery.ui.position.min.js"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span>
</code></pre>
<h3>使用</h3>
<pre><code class="language-js">$.contextMenu({
        <span class="hljs-attr">selector</span>: <span class="hljs-string">'#selector'</span>,<span class="hljs-comment">//选择器</span>
        items: {
            <span class="hljs-attr">copy</span>: {
                <span class="hljs-attr">name</span>:<span class="hljs-string">"特殊标记"</span>,<span class="hljs-comment">//名称</span>
                icon: <span class="hljs-string">"fa-heart"</span>,<span class="hljs-comment">//图标</span>
                callback: <span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params">key, opt</span>) </span>{<span class="hljs-comment">//回调</span>
                    
                }
            }
        }
    });
</code></pre>
<h3>效果</h3>
<p><img src="https://xly2018.github.io/long/img/bfbb8309.gif" alt=""></p>
<h3>结合jqgrid</h3>
<pre><code class="language-js"><span class="hljs-comment">//添加onRightClickRow事件</span>
onRightClickRow: <span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params">rowid, iRow, iCol, e</span>) </span>{
    jseasyui.sys.student.main.initContextmenu(rowid);
},

<span class="hljs-comment">/*初始化右击菜单 为表格每一行绑定右击菜单*/</span>
jseasyui.sys.student.main.initContextmenu = <span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params">id</span>) </span>{
    <span class="hljs-keyword">var</span> rowData = $(<span class="hljs-string">"#table_list"</span>).jqGrid(<span class="hljs-string">'getRowData'</span>, id);
    <span class="hljs-keyword">var</span> selector = <span class="hljs-string">'#'</span> + id;
    <span class="hljs-comment">//重新注册右击菜单插件</span>
    $.contextMenu(<span class="hljs-string">'destroy'</span>, selector);
    $.contextMenu({
        <span class="hljs-attr">selector</span>: selector,
        <span class="hljs-attr">items</span>: {
            <span class="hljs-attr">copy</span>: {
                <span class="hljs-attr">name</span>: rowData.specialMarkers == <span class="hljs-number">0</span> ? <span class="hljs-string">"特殊标记"</span> : <span class="hljs-string">"取消特殊标记"</span>,
                <span class="hljs-attr">icon</span>: rowData.specialMarkers == <span class="hljs-number">0</span> ? <span class="hljs-string">"fa-heart"</span> : <span class="hljs-string">"fa-heart-o"</span>,
                <span class="hljs-attr">callback</span>: <span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params">key, opt</span>) </span>{
                    jseasyui.ajaxJson(<span class="hljs-string">'student/markers'</span>, {<span class="hljs-attr">id</span>: id}, <span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params">data</span>) </span>{
                        jseasyui.sys.student.main.query();
                    })
                }
            }
        }
    });
}

</code></pre>
</section><footer class="footer-container"><div class="footer-body"><img src="/my-project/img/dubbo_gray.png"/><div class="cols-container"><div class="col col-12"><h3>免责声明</h3><p>免责声明的具体内容</p></div><div class="col col-6"><dl><dt>文档</dt><dd><a href="/my-project/zh-cn/docs/demo1.html" target="_self">概览</a></dd><dd><a href="/my-project/zh-cn/docs/demo2.html" target="_self">快速开始</a></dd><dd><a href="/my-project/zh-cn/docs/dir/demo3.html" target="_self">开发者指南</a></dd></dl></div><div class="col col-6"><dl><dt>资源</dt><dd><a href="/my-project/zh-cn/blog/index.html" target="_self">博客</a></dd><dd><a href="/my-project/zh-cn/community/index.html" target="_self">社区</a></dd></dl></div></div><div class="copyright"><span>Copyright © 2018 xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</span></div></div></footer></div></div>
	<script src="https://f.alicdn.com/react/15.4.1/react-with-addons.min.js"></script>
	<script src="https://f.alicdn.com/react/15.4.1/react-dom.min.js"></script>
	<script>
		window.rootPath = '/my-project';
  </script>
	<script src="/my-project/build/blogDetail.js"></script>
</body>
</html>